<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>空域综合管理-查看飞行进程</title>
		<link href="css/ele2.3.3.css" rel="stylesheet" type="text/css">
		<link href="css/flyDetail.css" rel="stylesheet" type="text/css">
	</head>

	<body>
		<!-- <div id="load"><loading v-show="showLoading"></loading></div> -->
		<div id="app" v-cloak>
			<header>
				<div class="logo">空域综合管理</div>
			</header>
			<div class="Wraper">
				<div class="mainBody">
					<h2>查看飞行进程</h2>
					<div class="cont">
						<!--工具条-->
						<el-collapse>
							<el-collapse-item title="飞行进程基本信息">
								<div class="collapse-content">
									<div><span class="state">状态：</span><span class="add-bottom">{{flyPlanBasicInfor.processState}}</span></div>
									<div class="baseinfo">
										
										<p><span>航空器编号：</span><span>{{flyPlanBasicInfor.aircraftNumber | nullDefalut}}</span></p>
										<p><span>飞行计划ID：</span><span>{{flyPlanBasicInfor.flyPlanCode | nullDefalut}}</span></p>
										<p><span>初始服务站：</span><span>{{flyPlanBasicInfor.initServerStation | nullDefalut}}</span></p>
										<p><span>当前服务站：</span><span>{{flyPlanBasicInfor.currentServerStation | nullDefalut}}</span></p>
										<p><span>预计起飞时间：</span><span>{{flyPlanBasicInfor.estimatedTakeoffTimeStr | nullDefalut}}</span></p>
										<p><span>预计降落时间：</span><span>{{flyPlanBasicInfor.estimatedLandingTimeStr | nullDefalut}}</span></p>
										<p><span>预计架次：</span><span>{{flyPlanBasicInfor.projectedShelf | nullDefalut}}</span></p>
										<p><span>实际起飞时间：</span><span>{{flyPlanBasicInfor.actualTakeoffTimeStr | nullDefalut}}</span></p>
										<p><span>实际降落时间：</span><span>{{flyPlanBasicInfor.actualLandingTimeStr | nullDefalut}}</span></p>
										<p><span>实际起落架次：</span><span>{{flyPlanBasicInfor.actualLandingGear | nullDefalut}}</span></p>
										<p><span>告警代码：</span><span>{{flyPlanBasicInfor.alarmCode | nullDefalut}}</span></p>
										<p><span>告警级别：</span><span>{{flyPlanBasicInfor.alarmLevel | nullDefalut}}</span></p>
										<p><span>联系人：</span><span>{{flyPlanBasicInfor.contacts | nullDefalut}}</span></p>
										<p><span>进程单创建时间：</span><span>{{flyPlanBasicInfor.createTimeStr | nullDefalut}}</span></p>
									</div>

								</div>
							</el-collapse-item>
						</el-collapse>
						<el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
								<el-tab-pane label="报告记录" name="first">
									<div class="distance">
										<el-table :data="reportNotesTableData" height="300" v-loading="loading" element-loading-text="数据加载中..." 
											border style="width: 100%">
											<el-table-column prop="reportPoint" label="报告点" align="center"></el-table-column>
											<el-table-column prop="reportPerson" label="报告人 "  align="center"></el-table-column>
											<el-table-column prop="reportTime" label="报告时间" align="center"></el-table-column>
											<el-table-column prop="describes" label="描述" align="center"></el-table-column>
											<el-table-column prop="recordTime" label="记录时间" align="center"></el-table-column>
											<el-table-column prop="recordPerson" label="记录人" align="center"></el-table-column>
										</el-table>
									</div>
								</el-tab-pane>
								<el-tab-pane label="状态记录" name="second">
									<div class="distance">
										<el-table :data="stateNotesTableData" height="300" v-loading="loading" element-loading-text="数据加载中..." 
											border style="width: 100%">
											<el-table-column prop="stateTime" label="时间" align="center"></el-table-column>
											<el-table-column prop="currentState" label="当前状态 "  align="center"></el-table-column>
											<el-table-column prop="previousState" label="上个状态" align="center"></el-table-column>
											<el-table-column prop="updateUser" label="修改人" align="center"></el-table-column>
											<el-table-column prop="ffsId" label="FFSID" align="center"></el-table-column>
										</el-table>
									</div>
								</el-tab-pane>
								<el-tab-pane label="移交记录" name="third">
									<div class="distance">
										<el-table :data="deliverNotesTableData" height="300" v-loading="loading" element-loading-text="数据加载中..." 
											border style="width: 100%">
											<el-table-column prop="reportPoint" label="移交时间" align="center"></el-table-column>
											<el-table-column prop="reportPerson" label="移交后FSS "  align="center"></el-table-column>
											<el-table-column prop="reportTime" label="移交前FSS" align="center"></el-table-column>
											<el-table-column prop="describes" label="经度" align="center"></el-table-column>
											<el-table-column prop="recordTime" label="纬度" align="center"></el-table-column>
											<el-table-column prop="recordTime" label="移交人" align="center"></el-table-column>
										</el-table>
									</div>
								</el-tab-pane>
							</el-tabs>
					</div>
				</div>
			</div>
		</div>

		<script src="plugins/vue2.5.9.js"></script>
		<script src="plugins/axios.min.js"></script>
		<!--<script src="plugins/ele2.3.3.js"></script>-->
		<script src="plugins/element-ui.js"></script>
		<script src="plugins/httpVueLoader.js"></script>
		<script src="plugins/jquery.min.js"></script>
		<script src="plugins/leaflet.js"></script>
		<script src="plugins/iclient9-leaflet.min.js"></script>
		<script src="plugins/leaflet.draw.js"></script>
		<script src="plugins/leaflet.measurecontrol.min.js"></script>
		<script src="plugins/leaflet.rotatedMarker.js"></script>

		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				// mixins: [mixin_common],
				data: {
					queryParams: {
						id: '5e5fc836-95e5-4cbb-9832-b71bdf7c3109'
					},
					loading: false,
					activeName2: 'first',
					tableData: [],
					reportNotesTableData: [],                        //报告记录
               		stateNotesTableData: [],                         //状态记录
                	deliverNotesTableData: [],                       //移交记录
					flyPlanBasicInfor: {}, //飞行计划基本信息
					total: 0,
					dialogFormVisible: false,
					userForm: {
						id: '',
						supervisingDevices: ''
					},
					rules: {
						supervisingDevices: [
							{ required: true, message: '监视设备不能为空', trigger: 'blur'}
						]
					},
					title: {
						edit: '修改监视设备'
					},
					dialogType: '',
					// commonUrl: 'http://dkjs.op-fly.cn/system/', //公共部分url
					commonUrl: 'http://212.64.57.59:10006/', //公共部分url
					//commonUrl: 'http://127.0.0.1:10006/', //公共部分url
				},
				created: function() {
					this.queryParams.id = this.getQueryString('id');
					this.getData()
				},
				filters: {
					nullDefalut: function(val) {
						if(val == null || val == '') {
							return '无记录';
						} else {
							return val;
						}
					},
				},

				mounted: function() {

				},

				methods: {
					handleClick(tab, event) {
						console.log(tab, event);
					},
					//获取url中的数据
					getQueryString: function(name) {
						var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
						var r = window.location.search.substr(1).match(reg);
						if(r != null) return unescape(r[2]);
						return null;
					},
					getData: function() {
						var self = this;
						var parms = self.queryParams;
						//飞行计划基本信息
						axios.post(self.commonUrl + 'flyProcess/selectDetail', parms).then(function(response) {
							if(response.status == 200) {
								console.log(response)
								self.flyPlanBasicInfor = response.data.flyProcess
							}
						}).catch(function(error) {
							console.log(error);
						});
						//查看报告记录
						axios.post(self.commonUrl + 'flyProcess/selectReportRecord', parms).then(function(response) {
							if(response.status == 200) {
								console.log(response)
								self.reportNotesTableData = response.data.reportRecords
							}
						}).catch(function(error) {
							console.log(error);
						});
						//查看状态记录
						axios.post(self.commonUrl + 'flyProcess/selectStateList', parms).then(function(response) {
							if(response.status == 200) {
								console.log(response)
								self.stateNotesTableData = response.data.stateRecords
							}
						}).catch(function(error) {
							console.log(error);
						});

						
					},
					
					
				}
			});
		</script>

	</body>

</html>